<template>
  <div>
    <el-alert :title="`👨‍💼 ${$t('webAuto.SetupApprovalAgent')}`" type="success" :closable="false"/>
    <el-form :model="agent" style="margin-top: 20px" label-width="70px">
      <el-form-item :label="$t('webAuto.ProxyTimeLimit')" prop="timeRange">
        <el-date-picker v-model="agent.timeRange" type="datetimerange" :range-separator="$t('webAuto.to')"
                        :start-placeholder="$t('webAuto.startData')" :end-placeholder="$t('webAuto.endData')" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"/>
      </el-form-item>
      <el-form-item :label="$t('webAuto.agent')" prop="user">
        <div style="display:flex;">
          <el-button style="margin-right: 20px;" icon="user" @click="$refs.orgPicker.show()">{{$t('webAuto.SetUpAgent')}}</el-button>
          <w-avatar :size="35" :name="agent.user.name" :src="agent.user.avatar" v-if="agent.user"></w-avatar>
        </div>
      </el-form-item>
      <el-form-item :label="$t('webAuto.CancelProxy')" v-if="agent.effective">
        <el-button type="warning" icon="refresh-left" @click="cancelAgent" plain>{{$t('webAuto.CancelAgent')}}</el-button>
      </el-form-item>
    </el-form>
    <org-picker :title="$t('webAuto.userToSwitch')" type="user" ref="orgPicker" :selected="agent.user ? [agent.user] : []" @ok="selected"/>
  </div>
</template>

<script>
import { getUserAgent, setUserAgent, cancelUserAgent } from '@/api/org'
import OrgPicker from '@/components/common/OrgPicker.vue'

export default {
  name: 'ApprovalAgent',
  components: { OrgPicker },
  data() {
    return {
      agent: {
        timeRange: null,
        user: null,
        effective: false,
      },
    }
  },
  computed: {
    loginUser() {
      return this.$store.state.loginUser
    },
  },
  mounted() {
    this.getUserAgent()
  },
  methods: {
    selected(users) {
      this.agent.user = users[0]
    },
    getUserAgent() {
      getUserAgent().then((rsp) => {
          if (rsp.data) {
            this.agent = rsp.data
          } else {
            this.agent.timeRange = null
            this.agent.user = null
            this.agent.effective = false
          }
        }).catch((err) => {
          this.$err(err, this.$t('webAuto.obtainUserApprovFaile'))
        })
    },
    setUserAgent(call) {
      if (this.agent.timeRange && this.agent.user) {
        if (this.agent.user.id === this.loginUser.id) {
          this.$message.warning(this.$t('webAuto.NotAllowedMyself'))
          return
        }
        setUserAgent(this.agent).then((rsp) => {
            this.$ok(rsp, this.$t('webAuto.SuccessSetUpApprovalAgent'))
            call()
          }).catch((err) => {
            this.$err(err, this.$t('webAuto.setupApprovFaile'))
          })
      } else {
        this.$message.warning(this.$t('webAuto.PleaseCompleteSsettings'))
      }
    },
    cancelAgent() {
      this.$confirm(this.$t('webAuto.cancelingApprovalSetting'), this.$t('webAuto.prompt'), {
          confirmButtonText: this.$t('webAuto.sure'),
          cancelButtonText: this.$t('webAuto.cancel'),
          type: 'warning',
        }
      ).then(() => {
        cancelUserAgent().then((rsp) => {
            this.$ok(rsp, this.$t('webAuto.SettingsSuccessfully'))
            this.getUserAgent()
          }).cache((err) => {
            this.$err(err, this.$t('webAuto.FailedSetting'))
          })
      })
    },
  },
}
</script>

<style scoped></style>
